<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>

<sd:head parseContent="true"/>

<script type="text/javascript" src="<s:url value="/js/jquery/jquery.collapse.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/center.js"/>"></script>

<s:form cssClass="tableEdit" style="width: 80%; margin-left: 10%">
    <tr>
        <th colspan="2" class="tableTitle">
            <h5>Site</h5>
        </th>
    </tr>

    <s:hidden name="id" value="%{centro.id}"/>
    <s:textfield label="ECLIPSE Number" name="eclipseId" value="%{centro.eclipseId}"/>
    <s:textfield label="Institution Name" name="institucion" value="%{centro.institucion}" cssClass="obligatorio"/>

    <tr><div id="div_corp">Razón social</div></tr>
    <tr>
        <td>
            <label>Corporate Name: </label><img class="imgInfoCorp" src="<s:url value="/images/info.png"/>"/>
        </td>
        <td>
            <s:textfield theme="simple" name="corporateName" value="%{centro.corporateName}"/>
        </td>
    </tr>

    <s:textfield label="GR&A or SOS name" name="gryaSosName" value="%{centro.gryaSosName}"/>
    <s:textfield label="GR&A or SOS Comment" name="gryaSosComment" value="%{centro.gryaSosComment}"/>
    <s:textfield label="Legal Representative" name="legalRepresentative" value="%{centro.legalRepresentative}"/>
    <s:textfield label="PSA Contact Information" name="psaContactInformation" value="%{centro.psaContactInformation}"/>
    <s:textfield label="PSA Referred By" name="psaReferredBy" value="%{centro.psaReferredBy}"/>
    <s:textfield label="Web Page" name="webPage" value="%{centro.webPage}"/>

    <s:if test="%{countrySelected.countryId == 10}">
    <script type="text/javascript">
        $("#trgln").show();
    </script>
    </s:if>
    <s:url var="regionsUrl" action="getRegionsCenter"  namespace="/"/>
    <s:select label="Country" name="countries.country" id="country"  cssClass="obligatorio"
              headerKey="" headerValue="Choose a Country"
              list="countries"
              listKey="countryId"
              listValue="country"
              value="%{countrySelected.countryId}"
              onchange="getRegionsCenter(this.value, '%{regionsUrl}');">
    </s:select>

    <s:if test="centro.id != null">
        <s:url var="citiesUrl" action="getCitiesCenter" namespace="/"/>
        <s:select label="Region" name="regions.region" id="regions"
                  headerKey="" headerValue="Choose a Region"
                  list="regions"
                  listKey="regionId"
                  listValue="region"
                  value="%{regionSelected.regionId}"
                  onchange="getCitiesCenter(this.value,  '%{citiesUrl}')"/>
    </s:if>
    <tr id="trgln" style="display: none;" >
        <td>
            <label>GLN:</label>
        </td>
        <td>
            <s:textfield label="GLN"  name="gln" value="%{centro.gln}"  theme="simple"  />
        </td>
    </tr>
    <tr><div id="div_">Country Code + Area Code + Local Number</div></tr>
    <tr><div id="div_zip">Only numbers</div></tr>

    <tr>
    <td colspan="2">
    <div id="addresses-show-hide" class="collapseSeparacion">
        <h2 style="background-color: #00579C; width: 100%">Addresses</h2>
        <div>
            <table id="table_address" >
                <col width="108px" />
                <col width="226px" />
            <s:if test="%{centro.id == null || addresses.isEmpty()}">
                <tr>
                    <td><s:hidden id="addrAddress0" name="addresses[0].address" theme="simple" cssClass="addrAddress"/></td>
                    <td><s:hidden id="addrCity0" name="addresses[0].city"  theme="simple" cssClass="addrCity"/></td>
                    <td><s:hidden name="addresses[0].province" theme="simple" cssClass="addrProvince"/></td>
                    <td><s:hidden name="addresses[0].country" theme="simple" cssClass="addrCountry"/></td>
                </tr>
                <TR>
                    <td><label>Address:</label></td>
                    <td><s:textfield id="addressField0" value="%{addresses[0].address}"
                                     onchange="populateAddresses()"
                                     cssClass="address required" theme="simple" name="a0"/>
                    </td>
                </tr>
                <tr class="citiesdiv">
                    <td><label>City:</label></td>
                    <td><select style="width:215px" class="citiesClass required" id="cities0" name="c0"><option value="">Choose Country and Region</option></select></td>
                </tr>
                <tr >
                    <td><label>Zip code:</label><img class="imgInfoZip" src="<s:url value="/images/info.png"/>"/></td>
                    <td><s:textfield id="zipCode0" name="addresses[0].zipCode" cssClass="zipCode" theme="simple"/></td>
                </tr>
                <tr>
                    <td><label>Phone:</label><img class="imgInfo" src="<s:url value="/images/info.png"/>"/></td>
                    <td><s:textfield id="phone0" name="addresses[0].phone" cssClass="phone" theme="simple"/></td>
                </tr>
                <tr>
                    <td><label>Fax:</label></td>
                    <td><s:textfield id="fax0" name="addresses[0].fax" cssClass="fax" theme="simple"/></td>
                </tr>
                <tr>
                    <td><label>Email:</label></td>
                    <td><s:textfield id="email0" name="addresses[0].email" cssClass="email" theme="simple"/></td>
                </tr>
                <tr id="delAddr0" class="trEspacioAbajo">
                    <td colspan="2">
                        <s:hidden></s:hidden>
                    </td>
                    <td id="delAddrCell0" align="right" class="delAddress"><a onclick="deleteRowAddress('table_address', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                </tr>
                <s:hidden id="cantAddr" value="1" />
            </s:if>
            <s:else>
                <s:iterator value="%{addresses}" status="stat">
                    <tr>
                        <td><s:hidden name="addresses[%{#stat.index}].id" value="%{addresses[#stat.index].id}" theme="simple" cssClass="addrId"/></td>
                        <td><s:hidden id="addrAddress%{#stat.index}" name="addresses[%{#stat.index}].address" value="%{addresses[#stat.index].address}" theme="simple" cssClass="addrAddress"/></td>
                        <td><s:hidden id="addrCity%{#stat.index}" name="addresses[%{#stat.index}].city" value="%{addresses[#stat.index].city}" theme="simple" cssClass="addrCity"/></td>
                        <td><s:hidden name="addresses[%{#stat.index}].province" value="%{addresses[#stat.index].province}" theme="simple" cssClass="addrProvince"/></td>
                        <td><s:hidden name="addresses[%{#stat.index}].country" value="%{addresses[#stat.index].country}" theme="simple" cssClass="addrCountry"/></td>
                    </tr>
                    <TR>
                        <td><label>Address:</label></td>
                        <td><s:textfield id="addressField%{#stat.index}" value="%{addresses[#stat.index].address}"
                                         onchange="populateAddresses()"
                                         cssClass="address" theme="simple" name="a%{#stat.index}"/>
                        </td>
                    </tr>
                    <tr class="citiesdiv">
                        <td><label>City:</label></td>
                        <td><select class="citiesClass" name="c<s:property value="%{#stat.index}"/>" id="cities<s:property value="%{#stat.index}"/>"><option value="-1">Choose Country and Region</option></select></td>
                    </tr>
                    <tr >
                        <td><label>Zip code:</label><img class="imgInfoZip" src="<s:url value="/images/info.png"/>"/></td>
                        <td><s:textfield id="zipCode%{#stat.index}" name="addresses[%{#stat.index}].zipCode" value="%{addresses[#stat.index].zipCode}" cssClass="zipCode" theme="simple"/></td>
                    </tr>
                    <tr>
                        <td><label>Phone:</label><img class="imgInfo" src="<s:url value="/images/info.png"/>"/></td>
                        <td><s:textfield id="phone%{#stat.index}" name="addresses[%{#stat.index}].phone" value="%{addresses[#stat.index].phone}" cssClass="phone" theme="simple"/></td>
                    </tr>
                    <tr>
                        <td><label>Fax:</label></td>
                        <td><s:textfield id="fax%{#stat.index}" name="addresses[%{#stat.index}].fax" value="%{addresses[#stat.index].fax}" cssClass="fax" theme="simple"/></td>
                    </tr>
                    <tr>
                        <td><label>Email:</label></td>
                        <td><s:textfield id="email%{#stat.index}" name="addresses[%{#stat.index}].email" value="%{addresses[#stat.index].email}" cssClass="email" theme="simple"/></td>
                    </tr>
                    <tr id="delAddr0" class="trEspacioAbajo">
                        <td colspan="2">
                            <s:hidden></s:hidden>
                        </td>
                        <td id="delAddrCell<s:property value="%{#stat.index}"/>" align="right" class="delAddress"><a onclick="deleteRowAddress('table_address', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                    </tr>
                </s:iterator>
                <s:hidden id="cantAddr" value="%{addresses.size()}" />
            </s:else>
                <tr class="trEspacioAbajo">
                    <td colspan="2">
                        <s:hidden></s:hidden>
                    </td>
                    <td  align="right" ><a onclick="addRowAddress('table_address')"><img src="<s:url value="/images/add2.png"/>" alt="Add Row"></a></td>
                </tr>

            </table>
        </div>
    </div>
    </td>
</tr>


<tr>
    <td colspan="2">
       <div id="therapeutic-show-hide" class="collapseSeparacion">
        <h2 style="background-color: #00579C">Therapeutic Areas</h2>
            <div>
            <table id="table_content" >
                <col width="108px" />
                <col width="226px" />
        <s:if test="%{centro.id == null || centro.centroAddresses.isEmpty()}">
            <div id="trick" style="display: none;"><select><option value="-1">Choose Country and Region</option></select></div>
            <tr>
                <td><label>Therapeutic Area & Specialty:</label></td>
                <td><s:doubleselect
                        id="areas"
                        list="languageMap.keySet()"
                        listKey="id"
                        listValue="name"
                        name="centro.centroAddresses[0].therapeuticArea.id"
                        cssClass="areass"
                        onchange="validateClassWithName('areass',false);checkArea(this.value, this.selectedIndex, this.parentNode.children[2]);"
                        doubleId="specialities"
                        doubleHeaderKey="-1" doubleHeaderValue="Choose Specialty"
                        doubleListKey="id"
                        doubleListValue="name"
                        doubleName="centro.centroAddresses[0].speciality.id"
                        doubleList="languageMap.get(top)" theme="simple"/>
                    <s:hidden id="specialityhidden" value="%{centro.centroAddresses[0].speciality.id}" />
                    <s:hidden id="copySelect0" cssClass="copyClass"/>
                </td>
            </tr>
            <tr>
                <td><label>Address:</label></td>
                <td class="addressesdiv">
                        <s:hidden name="centro.centroAddresses[0].address.id" value="%{centro.centroAddresses[0].address.id}" cssClass="tAddrId"/>
                        <s:hidden id="addresshidden0" name="centro.centroAddresses[0].address.address" cssClass="tAddrAddress"/>
                        <s:hidden name="centro.centroAddresses[0].address.city" cssClass="tAddrCity"/>
                        <s:hidden name="centro.centroAddresses[0].address.province" cssClass="tAddrProvince"/>
                        <s:hidden name="centro.centroAddresses[0].address.country" cssClass="tAddrCountry"/>
                        <select id="selectAddress0" class="addresses" onchange="validateAddresses(false)"><option value="-1">Insert at least one address first</option></select>
                </td>
            </tr>
            <tr>
                <td><label>Observation:</label></td>
                <td><s:textarea id="observation0" name="centro.centroAddresses[0].observation" value="%{centro.centroAddresses[0].observation}" theme="simple" cssClass="obsClass" cols="20" rows="5"/></td>
            </tr>
            <tr id="delTherap0" class="trEspacioAbajo">
                <td>
                    <s:hidden></s:hidden>
                </td>
                <td id="delTherapCell0" align="right" class="delTherap"><a onclick="deleteRowSpecialty('table_content', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
            </tr>
            <s:hidden id="cantTherap" value="1" />
        </s:if>
        <s:else>
            <div id="trick" style="display: none;"><select><option value="-1">Choose Country and Region</option></select></div>
            <s:iterator value="%{centro.centroAddresses}"  status="stat">
                <s:if test="%{therapeuticArea != null}">
                    <tr>
                        <td><label>Therapeutic Area & Specialty:</label></td>
                        <td><s:doubleselect
                                    id="areas"
                                    cssClass="areass"
                                    list="languageMap.keySet()"
                                    listKey="id"
                                    listValue="name"
                                    name="centro.centroAddresses[%{#stat.index}].therapeuticArea.id"
                                    value="%{centro.centroAddresses[#stat.index].therapeuticArea.id}"
                                    onchange="validateClassWithName('areass',false); checkArea(this.value, this.selectedIndex, this.parentNode.children[2]);"
                                    doubleId="specialities"
                                    doubleHeaderKey="-1" doubleHeaderValue="Choose Specialty"
                                    doubleListKey="id"
                                    doubleListValue="name"
                                    doubleName="centro.centroAddresses[%{#stat.index}].speciality.id"
                                    doubleValue="%{centro.centroAddresses[#stat.index].speciality.id}"
                                    doubleList="languageMap.get(top)" theme="simple"/>
                            <s:hidden id="specialityhidden" value="%{centro.centroAddresses[#stat.index].speciality.id}" />
                            <s:hidden id="copySelect%{#stat.index}" cssClass="copyClass"/>
                        </td>
                    </tr>
                    <tr>
                        <td><label>Address:</label></td>
                        <td class="addressesdiv">
                                <s:hidden name="centro.centroAddresses[%{#stat.index}].address.id" value="%{centro.centroAddresses[#stat.index].address.id}" cssClass="tAddrId"/>
                                <s:hidden id="addresshidden%{#stat.index}" name="centro.centroAddresses[%{#stat.index}].address.address" value="%{centro.centroAddresses[#stat.index].address.address}" cssClass="tAddrAddress"/>
                                <s:hidden name="centro.centroAddresses[%{#stat.index}].address.city" value="%{centro.centroAddresses[#stat.index].address.city}" cssClass="tAddrCity"/>
                                <s:hidden name="centro.centroAddresses[%{#stat.index}].address.province" value="%{centro.centroAddresses[#stat.index].address.province}" cssClass="tAddrProvince"/>
                                <s:hidden name="centro.centroAddresses[%{#stat.index}].address.country" value="%{centro.centroAddresses[#stat.index].address.country}" cssClass="tAddrCountry"/>
                                <select id="selectAddress<s:property value='%{#stat.index}'/>" class="addresses" onchange="validateAddresses(false)"><option value="-1">Insert at least one address first</option></select>
                        </td>
                    </tr>
                    <tr>
                        <td><label>Observation:</label></td>
                        <td><s:textarea id="observation%{#stat.index}" name="centro.centroAddresses[%{#stat.index}].observation" value="%{centro.centroAddresses[#stat.index].observation}" theme="simple" cssClass="obsClass" cols="20" rows="5"/></td>
                    </tr>
                    <tr id="delTherap0" class="trEspacioAbajo">
                        <td>
                            <s:hidden></s:hidden>
                        </td>
                        <td id="delTherapCell<s:property value="%{#stat.index}"/>" align="right" class="delTherap"><a onclick="deleteRowSpecialty('table_content', $(this).closest('tr'))"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                    </tr>
                </s:if>
            </s:iterator>
            <s:hidden id="cantTherap" value="0" />
        </s:else>
         <tr>
            <th>
                <s:hidden></s:hidden>
            </th>
            <th align="right"><a onclick="addRowSpecialty('table_content')"><img src="<s:url value="/images/add2.png"/>" alt="Add Row"></a></th>
         </tr>
         </table>
         </div>
       </div>
    </td>
</tr>

    <tr>
        <td colspan="2" class="centeredButtons"><s:submit value="Save" id="save" action="save" onclick="return validate();" theme="simple"/></td>
    </tr>
</s:form>

<script type="text/javascript">
    var ids=new Array();
    ids[0] =  ["addresses-show-hide",true];
    ids[1] =  ["therapeutic-show-hide",true];
    loadCollapse(ids);
    initCamposObligatorios();
</script>

<script type="text/javascript">
    $('#center').css({"color":"#EE5102","fontWeight":"bold"});
</script>